import { Input, NavBar, TextArea } from 'antd-mobile';
import { useEffect, useState } from 'react';

import styles from './index.module.scss';
type props = {
  // 关闭弹窗事件
  onClose: () => void;
  // 类型
  type: '' | 'name' | 'intro';
  // 值
  value: string;
  // 更新昵称
  onUpdatename: (type: 'name' | 'intro', value: string) => void;
};
const EditInput = ({
  onClose,
  type,
  value: inputvalue,
  onUpdatename,
}: props) => {
  const [value, setvalue] = useState(inputvalue);
  useEffect(() => {
    setvalue(inputvalue);
  }, [inputvalue]);
  // 更新昵称
  const onSend = () => {
    if (type === '') return;
    onUpdatename(type, value);
  };
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        className="navbar"
        right={
          <span className="commit-btn" onClick={onSend}>
            提交
          </span>
        }
      >
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>
        {type === 'name' ? (
          <div className="input-wrap">
            <Input
              placeholder="请输入"
              value={value}
              onChange={(val) => setvalue(val)}
            />
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入"
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            value={value}
            onChange={(val) => setvalue(val)}
          />
        )}
      </div>
    </div>
  );
};

export default EditInput;
